<html>
  <head>

  </head>

  <body>

    <button class="btn1">按钮1</button>
  <button class="btn2" data-index="1">按钮2</button>
  </body>

  <script>

const btn1 = document.querySelector(".btn1");
const btn2 = document.querySelector(".btn2");
btn1.addEventListener("click", () => {
  console.log("按钮1被点击了.");
});
btn2.addEventListener("click", (e) => {
  console.log("按钮2被点击了.");
  // 原生事件的detail表示短时间内事件触发的次数
  console.log("click detail:", e.detail);
});
 
const target = new EventTarget();
target.addEventListener("customEvent", (e) => {
  // 自定义事件的detail表示传递的自定义参数
  console.log("customEvent detail:", e.detail);
});
// 按钮1点击, 触发自定义对象的自定义事件 customEvent
btn1.addEventListener("click", () => {
  const params = {
    a: "a",
    b: "b",
  };
  target.dispatchEvent(
    new CustomEvent("customEvent", {
      detail: {
        index: btn2.dataset.index,
        ...params,
      },
    })
  );
});


  </script>
</html>